<template>
  <div class="loading-cantainer" :style="{backgroundColor:this.backgroundColor}">
    <div v-if="error" class="error center">
      <i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
      <p>{{error}}</p>
      <a v-if="refresh" @click="refresh()">
        <i class="fa fa-refresh" aria-hidden="true"></i>点击重试</a>
    </div>
    <div v-else class="spinner center" :style="{backgroundColor:this.color}"></div>
  </div>
</template>
<script>
export default {
  props: {
    loading: Boolean,
    error: String,
    color: String,
    refresh: Function,
    backgroundColor: String
  }
}
</script>
<style scoped lang="scss">
.loading-cantainer {
  background-color: rgba(10, 10, 10, 0.66);
  overflow: hidden;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 100;
  left: 0;
  width: 100%;
  .center {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
  .error {
    width: 100%;
    text-align: center;
    height: 100px;
    color: white;
    .icon {
      width: 100px;
      height: 100px;
      font-size: 100px;
      opacity: 1;
    }
  }
  .spinner {
    width: 40px;
    height: 40px;
    background-color: #67CF22;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
  }
  @-webkit-keyframes rotateplane {
    0% {
      -webkit-transform: perspective(120px)
    }
    50% {
      -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
      -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
  }
  @keyframes rotateplane {
    0% {
      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }
}
</style>
